{extend name="public/world"}
{block name="style"}
<style type="text/css">
h1 {
    text-align: center;
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    padding: 15px;
}
small {
    font-size: 65%;
    font-weight: 300;
    line-height: 1;
    color: #777;
}
.voucher {
    border: 0px;
    border-bottom: 1px solid #000;
    width: 100px;
    text-align: center;
}
.layui-table {
    width: 100%;
    background-color: #666;
    color: #fff;
}
.layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table-total, .layui-table-total tr, .layui-table[lay-even] tr:nth-child(even) {
    background-color: #222;
}
.layui-table tbody tr:hover {
    background-color: #666;
}
.layui-input, .layui-select {
    height: 30px;
}
.layui-treeSelect {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0;
    border-radius: 0;
    box-shadow: 1px 1px 20px rgba(0,0,0,.15);
}
.layui-table-cell {
    height: 20px;
    line-height: 20px;
}
.layui-card-body .layui-table {
    margin: 0;
}
.layui-table-tool {
    min-height: 33px;
    line-height: 30px;
    padding: 3px 10px 0;
}
.price {text-align: right;}
.layui-table-edit {display: none;}
.toin .layui-table-edit,.toin .layui-treeSelect {display: block;}
.description, .market {height: 100%;}
</style>
{/block}
{block name="container"}
<div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin">
    <div class="layui-card" style="padding: 0 20px;min-height: 600px;">
        <div class="layui-card-body">
            <h1 id="title">会计期间  <small><input type="text" name="period" value="{$period}" class="voucher" id="laydate-month"></small></h1>
            <div>凭证日期  <small style="font-size: 100%;"><input type="text" name="period_at" value="{$period_day}" class="voucher" id="laydate-day"></small></div>
            <div class="layui-border-box">
                <div class="layui-table-tool">
                    <div class="layui-table-tool-temp">
                        <div class="layui-btn-groupB">
                            <button class="layui-btn layui-btn-xs toAdd">+ 添加分录</button>
                            <button class="layui-btn layui-btn-xs layui-btn-danger toDel">- 删除分录</button>
                        </div>
                    </div>
                    <div class="layui-table-tool-self"></div>
                </div>
                <div class="layui-table-box" style="min-height: 500px;">
                    <table id="dataTable" class="layui-table" lay-size="sm">
                        <colgroup>
                            <col width="250">
                            <col width="400">
                            <col width="100">
                            <col width="100">
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th><div class="layui-table-cell">摘要</div></th>
                                <th><div class="layui-table-cell">科目</div></th>
                                <th style="text-align: right;"><div class="layui-table-cell">借方金额</div></th>
                                <th style="text-align: right;"><div class="layui-table-cell">贷方金额</div></th>
                                <th><div class="layui-table-cell">备注</div></th>
                            </tr>
                        </thead>
                        <tbody class="trBox">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="LAY-front-submit" id="LAY-front-submit" value="确认">
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script id="trView" type="text/html">
{{#  layui.each(d.list, function(index, item){ }}
    <tr class="item" data-index="{{ index }}">
        {{# if(index===0) { }}
        <td rowspan="{{ d.num }}">
            <div class="layui-table-cell">{{ d.description }}</div>
            <input type="text" name="description" autocomplete="off" class="desc description layui-input layui-table-edit" value="{{ d.description }}">
        </td>
        {{# } }}
        <td data-id="tree_name{{ index }}">
            <div class="layui-table-cell" id="text_tree_name{{ index }}">{{ item.code_name }}</div>
            <input type="hidden" name="item[{{ index }}][code]" id="code_tree_name{{ index }}" autocomplete="off" value="{{ item.code }}">
            <input type="text" name="item[{{ index }}][code_name]" class="code layui-input layui-table-edit" id="tree_name{{ index }}" lay-filter="tree_name{{ index }}" autocomplete="off" value="{{ item.code_name }}">
        </td>
        <td style="text-align: right;">
            <div class="layui-table-cell">{{ item.debit }}</div>
            <input type="text" name="item[{{ index }}][debit]" autocomplete="off" class="price debit layui-input layui-table-edit" value="{{ item.debit }}">
        </td>
        <td style="text-align: right;">
            <div class="layui-table-cell">{{ item.credit }}</div>
            <input type="text" name="item[{{ index }}][credit]" autocomplete="off" class="price credit layui-input layui-table-edit" value="{{ item.credit }}">
        </td>
        {{# if(index===0) { }}
        <td rowspan="{{ d.num }}">
            <div class="layui-table-cell">{{ d.market }}</div>
            <input type="text" name="market" autocomplete="off" class="desc market layui-input layui-table-edit" value="{{ d.market }}">
        </td>
        {{# } }}
    </tr>
{{# }); }}
    <tr id="toolTr">
        <td></td>
        <td style="text-align: right;"><div class="layui-table-cell">合计</div></td>
        <td style="text-align: right;"><div class="layui-table-cell debit-all">{{ d.debit }}</div></td>
        <td style="text-align: right;"><div class="layui-table-cell credit-all">{{ d.credit }}</div></td>
        <td></td>
    </tr>
</script>
<script>
    layui.use(['form','table', 'laytpl', 'treeSelect','laydate'], function() {
        var $ = layui.jquery
            , table = layui.table
            , treeSelect = layui.treeSelect
            , laydate = layui.laydate
            , laytpl = layui.laytpl
            , form = layui.form;
        var data = {
                num:0,
                description:'',
                market:'',
                debit:'0.00',
                credit:'0.00',
                list : []
            };
        laydate.render({
            elem: '#laydate-month'
            ,type: 'month'
            //,max:'nowTime'
            ,min:'2021-01-01'
            ,value: new Date()
            ,ready: function(date){
                $('#layui-laydate1').on('click','ul.laydate-month-list li', function() {
                    $(this).hasClass('.laydate-disabled') || $('#layui-laydate1').find('.laydate-btns-confirm').click();
                });
            }
            ,done: function(value, date){
                setTimeout(function(){
                    $('#seachSub').click();
                }, 100);
            }
        });
        laydate.render({
            elem: '#laydate-day'
            ,min: '2021-01-01'
            ,type: 'date'
            ,value: new Date()
            ,done: function(value, date){
            }
        });
        $('.toDel').click(function(){
            if(data.num <= 0) return false;
            if($('#dataTable').find('.toin').length > 0 ) {
                $('#dataTable').find('.toin').each(function(){
                    var index = $(this).attr('data-index');
                    if(typeof(index)=="undefined") return false;
                    data.num--;
                    data.list.splice(index, 1);
                })
            } else {
                data.num--;
                data.list.splice(-1, 1);
            }
            changeTable();
        });
        $('.toAdd').click(function(){
            data.num++;
            data.list.push({code:'',code_name:'',debit:'0.00',credit:'0.00'});
            changeTable();
        });
        var changeTable = function() {
            var getTpl = trView.innerHTML
            laytpl(getTpl).render(data, function(html){
                $('.trBox').html(html);
            });
            $('tr').click(function(){
                if($(this).hasClass('item')) {
                    if (!$(this).hasClass('toin')) {
                        $('#dataTable').find('tr').removeClass('toin');
                        $(this).addClass('toin');
                    }
                } else {
                    $('#dataTable').find('tr').removeClass('toin');
                }
            });
            $('.layui-table-edit.desc').on("change",function(){
                if($(this).hasClass('description')) {
                    data.description = $(this).val();
                }
                if($(this).hasClass('market')) {
                    data.market = $(this).val();
                }
                if($(this).hasClass('code')) {
                    var ind = $(this).closest("tr").index();
                    data.list[ind].code = $(this).val();
                }
                $(this).parent('td').find('.layui-table-cell').text($(this).val());
            });
            $('.layui-table-edit.price').on("change",function(){
                var ind = $(this).closest("tr").index();
                let price = $(this).val();
                if(isNaN(price) || price == '' || !price) {
                    price = '0.00';
                }
                price = parseFloat(price).toFixed(2);
                $(this).val(price);
                $(this).parent('td').find('.layui-table-cell').text(price);
                if($(this).hasClass('debit')) {
                    data.list[ind].debit = price;
                    changeDebit();
                }
                if($(this).hasClass('credit')) {
                    data.list[ind].credit = price;
                    changeCredit();
                }
            });
            $('.layui-table-edit.code').click(function() {
                var ind = $(this).closest("tr").index();
                var elem = $(this).attr('id');
                var toid = $('#code_' + elem).val() | 0;
                treeSelect.render({
                    // 选择器
                    elem: '#' + elem,
                    // 数据
                    data: "{:url('/erp.BasicsSubject/public_code_tree')}",
                    // 异步加载方式：get/post，默认get
                    type: 'post',
                    // 占位符
                    placeholder: '请选择会计科目',
                    // 是否开启搜索功能：true/false，默认false
                    search: true,
                    // 点击回调
                    click: function (d) {
                        $('#text_' + elem).text(d.current.name);
                        $('#' + elem).val(d.current.name);
                        $('#code_' + elem).val(d.current.code);
                        data.list[ind].code = d.current.code;
                        data.list[ind].code_name = d.current.name;
                    },
                    // 加载完成后的回调函数
                    success: function (d) {
                        // 选中节点，根据id筛选
                        if (toid) {
                            treeSelect.checkNode(elem, toid);
                        }
                    }
                });
            });
            changeDebit();
            changeCredit();
            form.render();
        }
        var changeDebit = function() {
            var money = '0.00';
            $('#dataTable').find('.debit').each(function(){
                let price = $(this).val();
                if(isNaN(price) || price == '' || !price) {
                    price = '0.00';
                }
                money = (parseFloat(money) + parseFloat(price)).toFixed(2);
            });
            $('.debit-all').text(money);
            data.debit = money;
        }
        var changeCredit = function() {
            var money = '0.00';
            $('#dataTable').find('.credit').each(function(){
                let price = $(this).val();
                if(isNaN(price) || price == '' || !price) {
                    price = '0.00';
                }
                money = (parseFloat(money) + parseFloat(price)).toFixed(2);
            });
            $('.credit-all').text(money);
            data.credit = money;
        }
    });
</script>
{/block}